<script setup>
	import { ref, reactive, watch } from 'vue'
	import { ElMessage, ElMessageBox } from 'element-plus'
	import { getDepartmentList } from '/src/_http/api.js'
	
	// 查询的参数
	let filterParams = reactive({
		pageNo: 1,
		pageSize: 10
	})
	// 表格数据
	let tableData = ref([])
	// 总条目数
	let total = ref(0)
	// 加载状态
	let tableLoading = ref(false)
	
	// 当前操作类型1添加 2修改
	let opType = ref(1)
	// 是否显示添加/修改对话框
	let showAddOrModifyDialog = ref(false)
	// 添加/修改对话框实例
	const addOrModifyFormRef = ref()
	// 添加/修改表单数据
	let addOrModifyForm = reactive({})
	// 添加/修改表单数据验证规则
	let addOrModifyFormRules = reactive({
		name: [
			{
				required: true,
				message: '请输入部门名称',
				trigger: 'blur'
			}
		]
	})
	// 按钮是否处于加载中状态
	let btnLoading = ref(false)
	
	// 选中的id列表
	let selectIds = []
	
	
	
	// 重置查询参数的方法
	const resetFilterParams = function () {
		filterParams['id'] = ''
		filterParams['name'] = ''
	}
	// 重置表单参数的方法
	const resetFormParams = function () {
		addOrModifyForm['id'] = ''
		addOrModifyForm['name'] = ''
	}
	// 获取部门列表
	const getTableDataList = async function () {
		tableLoading.value = true
		let [res, err] = await getDepartmentList(filterParams)
		console.log('部门列表', res)
		tableLoading.value = false
		tableData.value = res?.data?.data?.list || []
		total.value = res?.data?.data?.total || 0
	}
	// 点击刷新按钮
	const clickRefershBtn = function () {
		filterParams.pageNo = 1
		resetFilterParams()
		resetFormParams()
		getTableDataList()
	}
	// 点击搜索按钮
	const clickSearchBtn = function () {
		filterParams.pageNo = 1
		getTableDataList()
	}
	// 点击重置按钮
	const clickResetBtn = function () {
		resetFilterParams()
	}
	// 点击添加按钮
	const clickAddBtn = function () {
		opType.value = 1
		showAddOrModifyDialog.value = true
	}
	// 点击修改按钮
	const clickModifyBtn = function (row) {
		for (var key in addOrModifyForm) {
			addOrModifyForm[key] = row[key]
		}
		opType.value = 2
		showAddOrModifyDialog.value = true
	}
	// 点击对话框确认按钮
	const clickConfirmBtn = async function () {
		let validRes = await addOrModifyFormRef.value.validate().catch(err => {})
		if (!validRes) return
		btnLoading.value = true
		setTimeout(() => {
			btnLoading.value = false
			showAddOrModifyDialog.value = false
		}, 1000)
	}
	// 点击删除按钮
	const clickDeleteBtn = function (type, id) {
		let message = ''
		let ids = []
		if (type == 1) { // 删除多条数据
			if (selectIds.length <= 0) {
				ElMessage({
					message: '请选择需要删除的部门!',
					type: 'warning'
				})
				return
			}
			message = '确认删除已选择的部门?'
			ids = selectIds
		} else if (type == 2) { // 删除单条数据
			message = '确认删除该部门?'
			ids.push(id)
		}
		// console.log(ids)
		ElMessageBox({
			title: '删除部门',
			message: message,
			type: 'warning',
			showCancelButton: true,
			cancelButtonText: '取消',
			confirmButtonText: '确认',
			lockScroll: false,
			buttonSize: 'mini',
			draggable: true,
			beforeClose: function (action, instance, done) {
				// console.log(action)
				if (action == 'confirm') {
					ElMessage({
						message: '部门删除成功',
						type: 'success'
					})
					done()
				} else {
					done()
				}
			},
			callback: function (action, instance) {}
		})
	}
	// 当选择项发生变化时
	const selectionChange = function (selection) {
		// console.log(selection)
		selectIds = []
		selection.forEach(item => selectIds.push(item.id))
	}
	// 每页大小改变时
	const sizeChange = function (newSize) {
		filterParams.pageNo = 1
		getTableDataList()
	}
	// 页数改变时
	const currentChange = function (newPage) {
		getTableDataList()
	}
	watch(() => showAddOrModifyDialog.value, (newV) => {
		if (newV) return
		addOrModifyFormRef.value.resetFields()
		resetFormParams()
	})
	
	clickRefershBtn()
</script>

<template>
    <div  class="container department-container">
        <div class="box-card">
			<div class="card-header">
				<span>{{ $route.meta.title }}</span>
				<el-button type="primary" size="mini" @click="clickRefershBtn">刷新</el-button>
			</div>
			<div class="card-body">
				<div class="filter-wrap">
					<div class="filter-item">
						<el-input
							type="number"
						    v-model.trim="filterParams.id"
							placeholder="部门ID"
							size="small"
							style="width: 100%;"
						/>
					</div>
					<div class="filter-item">
						<el-input
							type="text"
						    v-model.trim="filterParams.name"
							placeholder="部门名称"
							size="small"
							style="width: 100%;"
						/>
					</div>
					
					<div class="filter-item btn-wrap">
						<div class="btn btn-reset">
							<el-button type="warning" size="mini" @click="clickResetBtn">重置</el-button>
						</div>
						<div class="btn btn-search">
							<el-button type="primary" size="mini" @click="clickSearchBtn">搜索</el-button>
						</div>
						<div class="btn btn-add">
							<el-button type="success" size="mini" @click="clickAddBtn">添加</el-button>
						</div>
						<div class="btn btn-delete">
							<el-button type="danger" size="mini" @click="clickDeleteBtn(1)">删除</el-button>
						</div>
					</div>
				</div>
				<div class="table-page-wrap">
					<el-table
						v-loading="tableLoading"
						element-loading-text="loading..."
						element-loading-background="rgba(255, 255, 255, 0.6)"
						:data="tableData"
						row-key="id"
						border
						size="mini"
						:header-cell-style="{
							textAlign: 'center'
						}"
						:cell-style="{
							textAlign: 'center'
						}"
						@selection-change="selectionChange"
					>
						<el-table-column type="selection" width="50" />
						<el-table-column type="index" label="序号" width="50" />
						<el-table-column prop="id" label="部门ID" min-width="100" />
						<el-table-column prop="name" label="部门名称" min-width="120" />
						<el-table-column prop="createTime" label="成立时间" min-width="140" />
						<el-table-column prop="operation" label="操作" width="160">
							<template #default="scope">
								<div style="">
									<el-button type="warning" size="mini" @click="clickModifyBtn(scope.row)">修改</el-button>
									<el-button type="danger" size="mini" @click="clickDeleteBtn(2, scope.row.id)">删除</el-button>
								</div>
							</template>
						</el-table-column>
					</el-table>
					<el-pagination
						:small="false"
						:background="true"
						:pager-count="5"
						:total="total"
						v-model:current-page="filterParams.pageNo"
						v-model:page-size="filterParams.pageSize"
						:page-sizes="[5, 10, 20, 50, 100]"
						layout="total, sizes, prev, pager, next, jumper"
						@size-change="sizeChange"
						@current-change="currentChange"
					/>
				</div>
			</div>
		</div>
    </div>
	
	<el-dialog
		v-model="showAddOrModifyDialog"
		:title="opType == 1 ? '添加部门' : '修改部门信息'"
	>
		<el-form
		    ref="addOrModifyFormRef"
		    :model="addOrModifyForm"
			:rules="addOrModifyFormRules"
		    label-position="top"
		    size="small"
		>
			<el-form-item label="部门名称" prop="name">
				<el-input type="text" v-model.trim="addOrModifyForm.name" />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button size="mini" @click="showAddOrModifyDialog = false">取消</el-button>
				<el-button size="mini" type="primary" :loading="btnLoading" @click="clickConfirmBtn">确认</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<style scoped lang="less">
</style>